<template>
	<view class="box">
		<view class="gy">房屋信息</view>
		<view class="room">
			<text>北京西三旗花园1号楼101</text>
		</view>
		<view class="gy">业主信息</view>

		<u-form :model="form" ref="uForm">
			<u-form-item label="姓名" labelWidth="208rpx">
				<u-input v-model="form.name" placeholder-style="color:#979797" placeholder="请填写您的真实姓名" border="none" />
			</u-form-item>
			<u-form-item label="性别" labelWidth="208rpx">
				<u-radio-group v-model="radio">
					<u-radio :customStyle="{marginRight: '30rpx'}" v-for=" (item, index) in radioList" :key="index">
						{{ item.sex }}
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="手机号" prop="mobile" ref="item1" labelWidth="208rpx">
				<u--input v-model="form.mobile" placeholder-style="color:#979797" placeholder="请输入手机号" border="none">
				</u--input>
				<block slot="right">
					<u-count-down @finish="onFinish" v-if="isShowCountDown" :time="6 * 1000" format="ss s">
					</u-count-down>
					<view v-else @click="getCode" class="code-btn" style="color: #5591AF;font-size: 28rpx;">获取验证码</view>
				</block>
			</u-form-item>
			<u-form-item label="验证码" prop="code" borderBottom ref="item1" labelWidth="208rpx">
				<u--input maxlength="6" v-model="form.code" placeholder-style="color:#979797" placeholder="请输入6位验证码"
					border="none">
				</u--input>
			</u-form-item>
		</u-form>

		<!-- 身份证 -->
		<view class="sfz">
			<view class="top">
				上传本人身份证照片
			</view>
			<view class="mes">
				请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。
			</view>
			<view class="indent">
				<image src="../../static/icon/upload.png" mode=""></image>
				<view class="">
					上传人像面照片
				</view>
			</view>
			<view class="indent">
				<image src="../../static/icon/upload.png" mode=""></image>
				<view class="">
					上传国徽面照片
				</view>
			</view>
		</view>
		<!-- 提交审核 -->
		<view class="sub">
			<image src="../../static/icon/check.png" mode=""></image>
			<view>提交审核</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioList: [{
					sex: '男'
				}, {
					sex: '女'
				}],
				form: {
					name: '',
					sex: '',
					mobile: '',
					code: ''
				},
				isShowCountDown: false,
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
							message: '手机号码格式不正确',
							trigger: ['change', 'blur'],
						}
					],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}, {
						pattern: /^\d{6}$/,
						message: '验证码格式不正确',
						trigger: ['change', 'blur'],
					}],
					name: [{
						required: true,
						message: '姓名不能为空',
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		methods: {
			getCode() {
				this.isShowCountDown = true
			}
		}
	}
</script>

<style lang="scss">
	.box {
		// padding: 15px;
		box-sizing: border-box;
		background-color: #fafafa;

		.gy {
			height: 86rpx;
			width: 100%;
			line-height: 86rpx;
			padding-left: 30rpx;
			font-weight: regular;
			color: #979797;
			font-size: 24rpx;
			box-sizing: border-box;
		}
	}

	.room {
		width: 750rpx;
		height: 102rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 30rpx;
		font-weight: regular;
		font-size: 28rpx;

	}

	::v-deep .u-form {
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #ffffff;

		.u-form-item {
			height: 102rpx;
			border-bottom: 1px solid #F2F2F6;
			;
		}
	}

	// 身份证
	.sfz {
		background-color: #fff;
		margin-top: 30rpx;
		padding-bottom: 30rpx;

		.top {
			font-style: 28rpx;
			padding: 30rpx 0 0 30rpx;
			margin-bottom: -20rpx;
		}

		.mes {
			color: #C3C3C5;
			font-family: PingFang SC;
			font-weight: regular;
			font-size: 22rpx;
			line-height: 1.5;
			letter-spacing: 0px;
			text-align: left;

			padding: 30rpx 0 0 30rpx;

		}
	}

	.indent {
		width: 690rpx;
		height: 340rpx;
		background-color: #FAFAFA;
		color: #5591AF;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-left: 30rpx;
		margin-top: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.sub {
		height: 145rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
